<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/register.js"></script>

</head>
<body>
<!--注册页表头-->
    <div id="logo-wrapper">
    <div class="logo" >
        <a href="#" title="欢迎来到zol商城">ZOL商城</a>

    </div>
    <p>中关村在线旗下网上商城</p>

    <div class="telphone">
        <span>已经有ZOL商城账号？</span>

        <a href="login.html">立即登录</a>
    </div>
</div>
<!--主体部分-->
    <div id="main-wrapper">
        <div class="main-top">30秒快速注册，加入ZOL商城</div>
        <form class="register-module">
            <div class="register-top">
                <div class="phone"><i class="iconfont">&#xe626;</i>用手机注册</div>

            </div>
            <div class="register-form">
                <div class="form-text">
                    <span>* 手机号:</span>
                    <input class="longer phone-number"  type="text" name="loginname"/>
                    <div class="flag"><i>x</i><span>请填写正确的11位手机号码</span></div>
                </div>
                <p>请填写手机号码</p>
            </div>
            <!--验证码-->
            <div class="register-form">
                <div class="form-text">
                    <span>* 验证码:</span>
                    <input class="shorter pic-test" type="text"/>
                    <input class="shorter random-pic" type="button"/>
                    <div class="flag"><i>x</i><span>请填写图片验证码</span></div>
                </div>
                <p>请填写图片验证码</p>
            </div>
            <div class="register-form">
                <div class="form-text">
                    <span>* 验证码:</span>
                    <input class="shorter msg-test" type="text"/>
                    <input class="shorter" type="button" value="获取短信验证码"/>
                    <div class="flag"><i>x</i><span>请填写手机验证码</span></div>
                </div>
                <p>请填写手机号码，然后点击[获取验证码]</p>
            </div>

            <div class="register-form">
                <div class="form-text">
                    <span>* 密码:</span>
                    <input class="longer pwd" type="text" name="userpwd" />
                    <div class="flag"><i>x</i><span>密码须6-16位数字字母</span></div>
                </div>
                <p>6-16位字母和数字的组合，不可用特殊字符</p>
            </div>
            <div class="register-form">
                <div class="form-text">
                    <span>* 确认密码:</span>
                    <input class="longer pwd-confirm" type="text"/>
                    <div><i class="error">x</i><span class="tishi">密码不一致</span></div>
                </div>
                <p>再次输入密码</p>
            </div>

        </form>
        <div class="right-login">
            <p>如果您已经注册，
                <a href="login.html">直接登录</a>
                或者用以下方式登录：
            </p>
            <a href="#" class="weibo" style="background:red"> <i class="iconfont">&#xe61e;</i>新浪微博登录   </a>
            <a href="#" style="background:deepskyblue"> <i class="iconfont">&#xe613;</i> qq账号登陆  </a>
            <a href="#" style="background:orangered"> <i class="iconfont">&#xe612;</i>支付宝登陆   </a>
            <a href="#" style="background:blue"> <i class="iconfont">&#xe608;</i>百度账号登陆   </a>
            <a href="#" style="background:green"> <i class="iconfont"> &#xe60f;</i>微信登陆  </a>


        </div>
        <div class="sub">
            <input type="checkbox"/><span>同意</span>
            <a href="#">《商城用户协议》</a>
            <a href="#">《隐私权说明》</a>
            <input class="btn-register" type="button" value="注册"/>
        </div>

    </div>
<!--足部-->
    <div id="footer-wrapper">
        <div class="footer">
            <a href="#">关于ZOL商城</a>&nbsp; |&nbsp;
            <a href="#">联系我们</a>&nbsp;|&nbsp;
            <a href="#">帮助中心</a>
            <p>©2017. 中关村在线 版权所有</p>
        </div>
    </div>
</body>
</html>
